<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col section_1">
        <view class="flex-col group_1">
          <text class="text_1">步骤一 做好设计（图文并茂）</text>
          <text class="text_2">
            作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。
          </text>
        </view>
        <view class="flex-col group_2">
          <view class="justify-center group_3">
            <view class="flex-col items-center text-wrapper"><text class="text_3">标准版</text></view>
            <view class="flex-col items-center text-wrapper_1"><text class="text_4">进阶版</text></view>
          </view>
          <view class="flex-col section_2">
            <text class="text_5">标准版</text>
            <text class="text_6">标准版中无具体描述，只有基础服务内容，详细内容需要在进阶版中查看。</text>
          </view>
        </view>
      </view>
      <view class="flex-col list">
        <view class="flex-row list-item">
          <image
		  :src="imgUrl+'16557826814892567217.png'"
           
            class="image_1"
          />
          <view class="flex-col group_5">
            <text class="text_7">1、了解自己可能喜欢的装修风格及装修档次和费用估算</text>
            <view class="justify-between group_6">
              <view class="flex-row">
                <view class="flex-row group_8 view_2">
                  <image
                   :src="imgUrl+' 16557826815113801323.png'"
                    class="image_3"
                  />
                  <text class="text_9">56</text>
                </view>
                <view class="flex-row group_9">
                  <image
                   :src="imgUrl+'16557826815580468287.png'"
                    class="image_5"
                  />
                  <text class="text_11">20</text>
                </view>
              </view>
              <image
               :src="imgUrl+' 16557826815062483643.png'"
                class="image_7"
              />
            </view>
          </view>
        </view>
        <view class="justify-between list-item">
          <view class="flex-row image_1 view_4">
            <image
              :src="imgUrl+'16557826818993742476.png'"
              class="image_9"
            />
            <view class="flex-col group_11">
              <text class="text_13">2、选择合适的设计师</text>
              <view class="flex-row group_12">
                <view class="flex-row">
                  <image
                    :src="imgUrl+'16557826815113801323.png'"
                    class="image_10"
                  />
                  <text class="text_14">56</text>
                </view>
                <view class="flex-row group_14">
                  <image
                    :src="imgUrl+'16557826815580468287.png'"
                    class="image_11"
                  />
                  <text class="text_15">20</text>
                </view>
              </view>
            </view>
          </view>
          <image
            :src="imgUrl+'16557826815062483643.png'"
            class="group_5 image_12"
          />
        </view>
        <view class="flex-row list-item">
          <image
            :src="imgUrl+'16557826814892567217.png'"
            class="image_1"
          />
          <view class="flex-col group_5">
            <text class="text_7 text_16">3、充分地沟通需求和现场详细测量</text>
            <view class="flex-row group_6 view_6">
              <view class="flex-row">
                <image
                 :src="imgUrl+' 16557826815113801323.png'"
                  class="group_8"
                />
                <text class="group_9 text_17">56</text>
              </view>
              <view class="flex-row image_7 view_7">
                <image
                  :src="imgUrl+'16557826815580468287.png'"
                  class="image_15"
                />
                <text class="text_18">20</text>
              </view>
            </view>
          </view>
          <image
           :src="imgUrl+' 16557826815062483643.png'"
            class="image_16"
          />
        </view>
        <view class="flex-row list-item">
          <image
           :src="imgUrl+' 16557826818993742476.png'"
            class="image_1"
          />
          <view class="flex-col group_5">
            <text class="text_7">4、对设计的平面设计（空间布局）进行论证并现场模拟可行性</text>
            <view class="justify-between group_6">
              <view class="flex-row">
                <view class="flex-row group_8 view_10">
                  <image
                   :src="imgUrl+' 16557826815113801323.png'"
                    class="image_3"
                  />
                  <text class="text_9">56</text>
                </view>
                <view class="flex-row group_9">
                  <image
                    :src="imgUrl+'16557826815580468287.png'"
                    class="image_5"
                  />
                  <text class="text_11">20</text>
                </view>
              </view>
              <image
                :src="imgUrl+'16557826815062483643.png'"
                class="image_7"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="justify-between section_3">
        <view class="group_19">
          <text class="text_22">￥</text>
          <text class="text_23">100</text>
        </view>
        <view class="flex-col items-center text-wrapper_2"><text class="text_24">确认付费</text></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
  .list-item {
    padding: 33rpx 0 32rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .image_1 {
    flex-shrink: 0;
    border-radius: 16rpx;
    width: 180rpx;
    height: 180rpx;
  }
  .group_5 {
    margin-left: 24rpx;
    flex: 1 1 auto;
  }
  .text_7 {
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
    text-align: left;
  }
  .group_6 {
    margin-top: 82rpx;
  }
  .image_7 {
    width: 32rpx;
    height: 32rpx;
  }
  .group_8 {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .group_9 {
    margin-left: 47rpx;
  }
  .image_3 {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .text_9 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_5 {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .text_11 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .page {
    background-color: #f6f7f9;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_1 {
    background-color: #ffffffff;
  }
  .list {
    margin-top: 19rpx;
    padding: 0 32rpx 25rpx;
    background-color: #ffffffff;
  }
  .section_3 {
    padding: 16rpx 24rpx 16rpx 32.5rpx;
    background-color: #ffffff;
    box-shadow: 0px -1rpx 0px 0px #00000014;
  }
  .group_1 {
    padding: 31rpx 32rpx 0;
  }
  .group_2 {
    margin-top: 63rpx;
    padding: 0 32rpx 31rpx;
    border-top: solid 1rpx #eeeeee;
  }
  .group_19 {
    align-self: center;
    height: 38rpx;
  }
  .text-wrapper_2 {
    padding: 14rpx 0 25rpx;
    background-color: #1d6aff;
    border-radius: 36rpx;
    width: 220rpx;
    height: 72rpx;
  }
  .text_1 {
    align-self: flex-start;
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_2 {
    margin-top: 33rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
    text-align: left;
  }
  .group_3 {
    padding: 32rpx 87rpx 20rpx;
  }
  .section_2 {
    padding: 34rpx 24rpx 42rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826811766179063.png');
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .view_4 {
    flex-shrink: initial;
    border-radius: initial;
    width: initial;
    height: initial;
  }
  .image_12 {
    margin-left: initial;
    flex: initial;
    margin-top: 148rpx;
    width: 32rpx;
    height: 32rpx;
  }
  .image_16 {
    margin-left: 12rpx;
    margin-top: 148rpx;
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .text_22 {
    color: #fa4a06;
    font-size: 20rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 23rpx;
  }
  .text_23 {
    color: #fa4a06;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_24 {
    color: #ffffff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text-wrapper {
    padding: 13rpx 0 23rpx;
    background-color: #f6f7f9;
    border-radius: 32rpx;
    width: 240rpx;
    height: 64rpx;
  }
  .text-wrapper_1 {
    margin-left: 32rpx;
    padding: 13rpx 0 23rpx;
    background-color: #1d6aff;
    border-radius: 32rpx;
    width: 240rpx;
    height: 64rpx;
  }
  .text_5 {
    align-self: flex-start;
    color: #1d6aff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_6 {
    margin-top: 25rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
    text-align: left;
  }
  .image_9 {
    border-radius: 16rpx;
    width: 180rpx;
    height: 180rpx;
  }
  .group_11 {
    margin-left: 24rpx;
  }
  .text_16 {
    text-align: initial;
  }
  .view_6 {
    margin-top: 115rpx;
  }
  .text_3 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_4 {
    color: #ffffff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_13 {
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_12 {
    margin-top: 115rpx;
  }
  .view_7 {
    width: initial;
    height: initial;
    margin-left: 47rpx;
  }
  .view_2 {
    flex-shrink: initial;
    width: initial;
    height: initial;
  }
  .group_14 {
    margin-left: 47rpx;
    margin-right: 84rpx;
  }
  .text_17 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_15 {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .text_18 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .view_10 {
    flex-shrink: initial;
    width: initial;
    height: initial;
  }
  .image_10 {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .text_14 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_11 {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
  .text_15 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
</style>